import{d as e,M as i,A as d,h as r}from"./Anchors-CRD96j4l.js";import{D as s,a as l}from"./Demo-Ck8WGKWN.js";import"./index-BpvWz174.js";const c={path:"/base/tooltip",name:"tooltip",title:"Tooltip 文字提示"};function o(n){const t={a:"a",br:"br",code:"code",h1:"h1",h2:"h2",p:"p",span:"span",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...n.components};return i(r,{children:[i("div",{class:"sys-ctx-main-left",children:[i(t.h1,{id:"sp-",children:[e(t.a,{"aria-hidden":"true",tabIndex:"-1",href:"#sp-",children:e(t.span,{className:"icon icon-link"})}),c.title]}),i(t.h2,{id:"sp-demos",children:[e(t.a,{"aria-hidden":"true",tabIndex:"-1",href:"#sp-demos",children:e(t.span,{className:"icon icon-link"})}),"代码演示 "]}),e(s,{columns:2}),e(l,{id:"base",title:"基础用法",src:"1base.demo.tsx",code:`import { Tooltip } from "cui-solid"

export default () => {
    return <Tooltip content={<div>Tip Content</div>}>
        <span>mouse over show tips</span>
    </Tooltip>
}`,scopes:void 0,children:i(t.p,{children:["简单的展示，添加属性 ",e(t.code,{className:"sp-inline-code",children:"closable"})," 可以关闭标签。",e(t.br,{}),`
`,"点击关闭标签时，会触发 ",e(t.code,{className:"sp-inline-code",children:"onClose"})," 事件。"]})}),e(l,{id:"align",title:"位置",src:"2align.demo.tsx",code:`import { BothSide, Button, Space, Tooltip } from "cui-solid"

export default () => {
    const style = {width: '120px', 'text-align': 'center'}

    return <Space dir="v" align="center">
        <Space dir="v" style={{width: '500px'}}>
            <Space dir="h" align="center" justify="center" size={30}>
                <Tooltip content="Content" align="topLeft">
                    <Button style={style}>Top Left</Button>
                </Tooltip>
                <Tooltip content="Content" align="top">
                    <Button style={style}>Top Center</Button>
                </Tooltip>
                <Tooltip content="Content" align="topRight">
                    <Button style={style}>Top Right</Button>
                </Tooltip>
            </Space>
            <BothSide>
                <Space dir="v">
                    <Tooltip content={<div><div>Content</div><div>Content</div><div>Content</div></div>} align="leftTop">
                        <Button>Left Top</Button>
                    </Tooltip>
                    <Tooltip content={<div><div>Content</div><div>Content</div><div>Content</div></div>} align="left">
                        <Button>Left Center</Button>
                    </Tooltip>
                    <Tooltip content={<div><div>Content</div><div>Content</div><div>Content</div></div>} align="leftBottom">
                        <Button>Left Bottom</Button>
                    </Tooltip>
                </Space>
                <Space dir="v">
                    <Tooltip content={<div><div>Content</div><div>Content</div><div>Content</div></div>} align="rightTop">
                        <Button>Right Top</Button>
                    </Tooltip>
                    <Tooltip content={<div><div>Content</div><div>Content</div><div>Content</div></div>} align="right">
                        <Button>Right Center</Button>
                    </Tooltip>
                    <Tooltip content={<div><div>Content</div><div>Content</div><div>Content</div></div>} align="rightBottom">
                        <Button>Right Bottom</Button>
                    </Tooltip>
                </Space>
            </BothSide>
            <Space dir="h" align="center" justify="center" size={30}>
                <Tooltip content="Content" align="bottomLeft">
                    <Button style={style}>Bottom Left</Button>
                </Tooltip>
                <Tooltip content="Content" align="bottom">
                    <Button style={style}>Bottom Center</Button>
                </Tooltip>
                <Tooltip content="Content" align="bottomRight">
                    <Button style={style}>Bottom Right</Button>
                </Tooltip>
            </Space>
        </Space>
    </Space>
}`,scopes:void 0,children:e(t.p,{children:"支持12个不同的方向显示，具体配置可查看API。"})}),e(l,{id:"multi",title:"多行内容",src:"3multi.demo.tsx",code:`import { Paragraph, Tooltip } from "cui-solid"

export default () => {
    return <Tooltip content={<div>
        <Paragraph style={{color: '#fff'}}>Tip Content</Paragraph>
        <Paragraph style={{color: '#fff'}}>自定义多行内容</Paragraph>
    </div>}>
        <span>show tips</span>
    </Tooltip>
}`,scopes:void 0,children:i(t.p,{children:[e(t.code,{className:"sp-inline-code",children:"content"})," 内容为自定义JSX标签，可以编辑复杂内容。"]})}),e(l,{id:"disabled",title:"禁用",src:"4disabled.demo.tsx",code:`import { Paragraph, Tooltip } from "cui-solid"

export default () => {
    return <Tooltip disabled content={<div>
        <Paragraph style={{color: '#fff'}}>Tip Content</Paragraph>
    </div>}>
        <span>show tips</span>
    </Tooltip>
}`,scopes:void 0,children:i(t.p,{children:["设置 ",e(t.code,{className:"sp-inline-code",children:"disabled"})," 可以禁用提示。"]})}),e(l,{id:"theme",title:"样式",src:"5theme.demo.tsx",code:`import { Paragraph, Space, Tooltip } from "cui-solid"

export default () => {
    return <Space dir="h">
        <Tooltip theme="light" content={<div>
            <Paragraph>Tip Content</Paragraph>
        </div>}>
            <span>show tips</span>
        </Tooltip>

        <Tooltip content={<div>
            <Paragraph style={{color: '#fff'}}>Tip Content</Paragraph>
        </div>}>
            <span>show tips</span>
        </Tooltip>
    </Space>
}`,scopes:void 0,children:i(t.p,{children:["通过设置 ",e(t.code,{className:"sp-inline-code",children:"theme"})," 切换显示样式, 支持 ",e(t.code,{className:"sp-inline-code",children:"light"})," 和 ",e(t.code,{className:"sp-inline-code",children:"dark"})," 默认 ",e(t.code,{className:"sp-inline-code",children:"dark"})]})}),i(t.h2,{id:"props",children:[e(t.a,{"aria-hidden":"true",tabIndex:"-1",href:"#props",children:e(t.span,{className:"icon icon-link"})}),"属性 "]}),i(t.table,{className:"sp-table",children:[e(t.thead,{children:i(t.tr,{children:[e(t.th,{style:{textAlign:"left"},children:"属性"}),e(t.th,{style:{textAlign:"left"},children:"说明"}),e(t.th,{style:{textAlign:"left"},children:"类型"}),e(t.th,{style:{textAlign:"left"},children:"默认值"})]})}),i(t.tbody,{children:[i(t.tr,{children:[e(t.td,{style:{textAlign:"left"},children:"classList"}),e(t.td,{style:{textAlign:"left"},children:"自定义class"}),e(t.td,{style:{textAlign:"left"},children:"Object"}),e(t.td,{style:{textAlign:"left"},children:"-"})]}),i(t.tr,{children:[e(t.td,{style:{textAlign:"left"},children:"class"}),e(t.td,{style:{textAlign:"left"},children:"自定义class"}),e(t.td,{style:{textAlign:"left"},children:"string"}),e(t.td,{style:{textAlign:"left"},children:"-"})]}),i(t.tr,{children:[e(t.td,{style:{textAlign:"left"},children:"style"}),e(t.td,{style:{textAlign:"left"},children:"自定义样式"}),e(t.td,{style:{textAlign:"left"},children:"Object"}),e(t.td,{style:{textAlign:"left"}})]}),i(t.tr,{children:[e(t.td,{style:{textAlign:"left"},children:"align"}),e(t.td,{style:{textAlign:"left"},children:"位置"}),e(t.td,{style:{textAlign:"left"},children:"top | bottom | left | right | topLeft | topRight | bottomLeft | bottomRight | leftTop | leftBottom | rightTop | rightBottom"}),e(t.td,{style:{textAlign:"left"},children:"right"})]}),i(t.tr,{children:[e(t.td,{style:{textAlign:"left"},children:"theme"}),e(t.td,{style:{textAlign:"left"},children:"样式"}),e(t.td,{style:{textAlign:"left"},children:"light | dark"}),e(t.td,{style:{textAlign:"left"},children:"dark"})]}),i(t.tr,{children:[e(t.td,{style:{textAlign:"left"},children:"content"}),e(t.td,{style:{textAlign:"left"},children:"提示内容"}),e(t.td,{style:{textAlign:"left"},children:"any"}),e(t.td,{style:{textAlign:"left"}})]}),i(t.tr,{children:[e(t.td,{style:{textAlign:"left"},children:"disabled"}),e(t.td,{style:{textAlign:"left"},children:"禁用状态"}),e(t.td,{style:{textAlign:"left"},children:"boolean"}),e(t.td,{style:{textAlign:"left"}})]})]})]})]}),`
`,`
`,`
`,e(d,{data:[{id:"",depth:1,title:""},{id:"sp-demos",depth:2,title:"代码演示"},{id:"base",title:"基础用法",src:"1base.demo.tsx"},{id:"align",title:"位置",src:"2align.demo.tsx"},{id:"multi",title:"多行内容",src:"3multi.demo.tsx"},{id:"disabled",title:"禁用",src:"4disabled.demo.tsx"},{id:"theme",title:"样式",src:"5theme.demo.tsx"},{id:"props",depth:2,title:"属性"}]})]})}function f(n={}){const{wrapper:t}=n.components||{};return t?e(t,{...n,children:e(o,{...n})}):o(n)}export{f as default,c as frontmatter};
